<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ws</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h2>ws timer</h2>
<textarea id="area" style="width: 400px;height: 80px;"></textarea>
<div><input type="button" value="send"></div>
<div id="log" style="border: solid 1px green;min-width: 400px;min-height: 100px;margin-top: 10px;" ></div>
<script>
    var wsUrl='ws://192.168.0.250:8812';

    var websocket=new WebSocket(wsUrl);

    websocket.onopen=function(evt){
        websocket.send("send hello!");
        log(2,"send hello");
        log(2,"connected!");
    }
    websocket.onmessage=function(evt){
        log(1,evt.data);
        console.log("server-return:"+evt.data);
    }
    websocket.onclose=function(evt){
        console.log("close")
        log(2,'close');

    }
    websocket.onerror=function(evt){
        console.log("err:")
    }
    $(function(){
        $('input[type="button"]').click(function(){
            var txt=$('#area').val();
            if(txt && websocket){
                websocket.send(txt);
                log(2,txt);
                $('#area').val('')
            }
        });

    })
    function log(type,msg){
        var color='red';
        if(type ==1){
            var p='server:';
        }else{
            var p='client:';
            color='blue';
        }
        var message="<div style='color:"+color+" '>"+p+msg+"</div>";
        $('#log').append(message);

    }



</script>


</body>
</html>
























